
<template>
  <div class="multipane">
    <slot></slot>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, watch, nextTick } from "vue";
import { useMousePressed } from "@vueuse/core";
import { useMouse } from "@vueuse/core";
const { x, y } = useMouse();
let tmpObj = {};
const mps = ref([]);
const mouseDown = ({ target, pageX, pageY }) => {
  const previousElementSibling = target.previousElementSibling;
  const previousWidth = previousElementSibling.offsetWidth;
  const nextElementSibling = target.nextElementSibling;
  const nextWidth = nextElementSibling.offsetWidth;

  tmpObj = {
    target,
    pageX,
    pageY,
    previousWidth,
    nextWidth,
  };
};

watch(x, (n) => {
  if (!tmpObj.target) return;
  const {
    target: { previousElementSibling, nextElementSibling },
    pageX,
    previousWidth,
    nextWidth,
  } = tmpObj;
  const moveWidth = x.value - pageX;
  previousElementSibling.style.width = previousWidth + moveWidth + "px";
  nextElementSibling.style.width = nextWidth - moveWidth + "px";
});

watch(
  mps,
  (n) => {
    let notClear = false;
    n.forEach((one) => {
      notClear = notClear || one.value;
    });
    if (!notClear) tmpObj = {};
  },
  { deep: true }
);

const init = () => {
  // 获取mrEl
  const mrEls = document.getElementsByClassName("multipaneResizer");
  for (let mrEl of mrEls) {
    mrEl.addEventListener("mousedown", mouseDown);
    const { pressed } = useMousePressed({ target: mrEl });
    mps.value.push(pressed);
  }
};

onMounted(() => {
  init();
});
// 添加滑动事件
</script>
<style scoped>
.multipane {
  display: flex;
  width: 100%;
}
</style>